
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>任务调度</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-button-group style="margin-top: 20px">
      <el-button
        v-permission="['add', $route]"
        type="primary"
        icon="el-icon-plus"
        @click="handleEdit('新增任务', 1)"
        >新增</el-button
      >
      <el-button
        v-permission="['edit', $route]"
        type="primary"
        icon="el-icon-tickets"
        @click="handleEdit('编辑任务', 2)"
        >修改</el-button
      >
      <!-- <el-button
        type="primary"
        icon="el-icon-delete"
        v-permission="['del', $route]"
        @click="handleEdit()"
        >删除</el-button
      > -->
    </el-button-group>
    <!--列表-->
    <el-table
      size="small"
      :data="DataList"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
      @current-change="handleCurrentChange"
    >
      <el-table-column
        align="center"
        sortable
        prop="TaskName"
        label="作业名称"
        width="200"
      >
      </el-table-column>

      <el-table-column
        align="center"
        sortable
        prop="GroupName"
        label="分组"
        width="120"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="Interval"
        label="间隔(Cron)"
        width="120"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="ApiUrl"
        label="远程调用接口Url"
        width="300"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="AuthKey"
        label="header-Key"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="AuthValue"
        label="header-value"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="RequestType"
        label="请求方式"
        width="120"
      >
      </el-table-column>
      <el-table-column align="center" sortable prop="Describe" label="描述">
      </el-table-column>
      <el-table-column align="center" sortable label="状态" width="120">
        <template slot-scope="scope">
          {{ getstatusname(scope.row.Status) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        sortable
        prop="CreateTime"
        label="添加时间"
        min-width="120"
      >
      </el-table-column>

      <el-table-column label="操作" min-width="400" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="btnPause(scope.row.GuId)"
            v-permission="['Pause', $route]"
            >暂停</el-button
          >
          <el-button
            size="mini"
            type="success"
            @click="btnStart(scope.row.GuId)"
            v-permission="['Start', $route]"
            >开始任务</el-button
          >

          <el-button
            size="mini"
            type="warning"
            @click="btnRun(scope.row.GuId)"
            v-permission="['Run', $route]"
            >立即执行</el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="btnRecords(scope.row.GuId)"
            v-permission="['Records', $route]"
            >查看记录</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!-- 编辑界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="50%"
      @click="closeDialog('edit')"
      :close-on-click-modal="false"
    >
      <el-form
        label-width="120px"
        ref="editForm"
        :rules="rules"
        :model="editForm"
      >
        <el-form-item label="作业名称" prop="TaskName">
          <el-input
            placeholder="请输入作业名称"
            v-model="editForm.TaskName"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="分组名称" prop="GroupName">
          <el-input
            placeholder="请输入分组名称"
            v-model="editForm.GroupName"
            clearable
          >
          </el-input>
        </el-form-item>

        <el-form-item label="间隔(Cron)" prop="Interval">
          <el-input
            placeholder="请输入间隔(Cron)"
            v-model="editForm.Interval"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="接口Url" prop="ApiUrl">
          <el-input
            placeholder="请输入接口Url"
            v-model="editForm.ApiUrl"
            clearable
          >
          </el-input>
        </el-form-item>

        <el-form-item label="header-Key" prop="AuthKey">
          <el-input
            placeholder="请输入header-Key"
            v-model="editForm.AuthKey"
            clearable
          >
          </el-input>
        </el-form-item>

        <el-form-item label="header-value" prop="AuthValue">
          <el-input
            placeholder="请输入header-value"
            v-model="editForm.AuthValue"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="请求方式" prop="RequestType">
          <el-select v-model="editForm.RequestType" placeholder="请选择">
            <el-option label="Post" value="Post"> </el-option>
            <el-option label="Get" value="Get"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注说明" prop="Describe">
          <el-input type="textarea" v-model="editForm.Describe"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit('editForm')"
            >保存</el-button
          >
          <el-button @click="closeDialog('editForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      title="操作记录"
      :visible.sync="OperationRecordsVisible"
      width="50%"
      @click="OperationRecordsVisible = false"
      :close-on-click-modal="false"
    >
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in RecordsList"
          :key="index"
          color="#0bbd87"
          :timestamp="item.Details"
        >
          {{ item.CreateTime }}
        </el-timeline-item>
      </el-timeline>

      <Pagination
        v-bind:child-msg="OperationRecordspageparm"
        @callFather="OperationRecordscallFather"
      ></Pagination>
    </el-dialog>
  </div>
</template>

<script  >
// 导入请求方法
import { req, reqjson } from "@/api/axiosFun";

import Pagination from "../../components/Pagination";
export default {
  data() {
    return {
      loading: false, //是显示加载
      title: "新增任务管理",
      editFormVisible: false, //控制编辑页面显示与隐藏
      OperationRecordsVisible: false, //操作记录显示与隐藏
      Recordsgid: "", //获取操作详情的数据
      // 编辑与添加
      editForm: {
        ApiUrl: "",
        AuthKey: "",
        AuthValue: "",
        Describe: "",
        GroupName: "",
        Interval: "",
        RequestType: "",
        TaskName: "",
        GuId: "",
      },
      selecteditfrom: "",
      rules: {
        ApiUrl: [
          { required: true, message: "请输入请求地址", trigger: "blur" },
        ],
        Interval: [
          { required: true, message: "请输入执行时间", trigger: "blur" },
        ],
        GroupName: [
          { required: true, message: "请输入分组名称", trigger: "blur" },
        ],
        RequestType: [
          { required: true, message: "请选择请求类型", trigger: "change" },
        ],
        TaskName: [
          { required: true, message: "请输入任务名称", trigger: "blur" },
        ],
      },
      //任务执行日志
      RecordsList: [],
      //数据
      DataList: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      //操作详情分页参数
      OperationRecordspageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
    };
  },
  // 注册组件
  components: {
    Pagination,
  },

  /**
   * 数据发生改变
   */
  watch: {},

  /**
   * 创建完毕
   */
  created() {
    this.getdata();
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取数据方法
    getdata(parameter) {
      let data = {
        page: this.pageparm.currentPage,
        limit: this.pageparm.pageSize,
      };
      this.loading = true;
      reqjson(
        "post",
        "/Job/GetJobs?token=" + this.$jsutils.sessionget("token"),
        data
      )
        .then((x) => {
          this.loading = false;
          if (x.success) {
            this.pageparm.currentPage = x.data.CurrentPage;
            this.pageparm.pageSize = x.data.ItemsPerPage;
            this.pageparm.total = x.data.TotalItems;
            this.DataList = x.data.Items;
          }
        })
        .catch((x) => {
          this.loading = false;
          console.log(x);
        });
    },
    // 分页插件事件
    callFather(parm) {
      this.pageparm.currentPage = parm.currentPage;
      this.pageparm.pageSize = parm.pageSize;
      this.getdata(this.pageparm);
    },
    // 操作详情分页插件事件
    OperationRecordscallFather(parm) {
      this.OperationRecordspageparm.currentPage = parm.currentPage;
      this.OperationRecordspageparm.pageSize = parm.pageSize;
      this.btnRecords(this.Recordsgid);
    },
    //搜索事件
    search() {
      this.getdata(this.pageparm);
    },

    //显示编辑界面
    handleEdit(...prams) {
      this.title = prams[0];
      if (prams[1] == 1) {
        //新增
        this.editForm = {
          ApiUrl: "",
          AuthKey: "",
          AuthValue: "",
          Describe: "",
          GroupName: "",
          Interval: "",
          RequestType: "",
          TaskName: "",
          GuId: "",
        };
        this.editFormVisible = true;
      } else if (prams[1] == 2) {
        //编辑
        if (!!this.selecteditfrom) {
          this.editForm = this.selecteditfrom;
          this.editFormVisible = true;
        } else this.$message.error("请选择需要编辑的数据");
      }
    },

    handleCurrentChange(val) {
      this.selecteditfrom = val;
    },

    //获取状态名称
    getstatusname(v) {
      switch (v) {
        case 0:
          return "执行中";
        case 1:
          return "暂停";

        case 3:
          return "异常";
        case 4:
          return "阻塞";
        case 5:
          return "停止";
        default:
          return "--";
      }
    },
    // 关闭编辑、增加弹出框
    closeDialog(formName) {
      this.editFormVisible = false;

      this.$refs[formName].resetFields();
    },
    //提交信息
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = "/Job/Add?token=";
          if (!!this.editForm.GuId) url = "/Job/Update?token=";

          this.loading = true;
          reqjson(
            "post",
            url + this.$jsutils.sessionget("token"),
            this.editForm
          )
            .then((x) => {
              this.loading = false;
              if (x.success) {
                this.$message.success("操作成功!");
                this.closeDialog();
                this.getdata();
              }
            })
            .catch((x) => {
              this.loading = false;
              console.log(x);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //立即执行
    btnRun(gid) {
      this.loading = true;
      reqjson("post", "/Job/Run?token=" + this.$jsutils.sessionget("token"), {
        GuId: gid,
      })
        .then((x) => {
          this.loading = false;
          if (x.success) {
            this.$message.success("操作成功!");
            this.getdata();
          }
        })
        .catch((x) => {
          this.loading = false;
          console.log(x);
        });
    },

    //开始任务
    btnStart(gid) {
      this.loading = true;
      reqjson("post", "/Job/Start?token=" + this.$jsutils.sessionget("token"), {
        GuId: gid,
      })
        .then((x) => {
          this.loading = false;
          if (x.success) {
            this.$message.success("操作成功!");
            this.getdata();
          }
        })
        .catch((x) => {
          this.loading = false;
          console.log(x);
        });
    },
    //暂停任务
    btnPause(gid) {
      this.loading = true;
      reqjson("post", "/Job/Pause?token=" + this.$jsutils.sessionget("token"), {
        GuId: gid,
      })
        .then((x) => {
          this.loading = false;
          if (x.success) {
            this.$message.success("操作成功!");
            this.getdata();
          }
        })
        .catch((x) => {
          this.loading = false;
          console.log(x);
        });
    },

    //获取操作详情
    btnRecords(gid) {
      this.OperationRecordsVisible = true;
      this.loading = true;
      this.Recordsgid = gid;
      let data = {
        page: this.OperationRecordspageparm.currentPage,
        limit: this.OperationRecordspageparm.pageSize,
        data: gid,
      };
      reqjson(
        "post",
        "/Job/GetRunLog?token=" + this.$jsutils.sessionget("token"),
        data
      )
        .then((x) => {
          this.loading = false;
          if (x.success) {
            this.OperationRecordspageparm.currentPage = x.data.CurrentPage;
            this.OperationRecordspageparm.pageSize = x.data.ItemsPerPage;
            this.OperationRecordspageparm.total = x.data.TotalItems;
            this.RecordsList = x.data.Items;
          }
        })
        .catch((x) => {
          this.loading = false;
          console.log(x);
        });
    },
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 